<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<div class="main">
    <div class="container head">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="grade" autocomplete="off" placeholder="请输入年级" class="layui-input">
                </div>
                <div class="layui-form-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green">
    <div class="container content">
        <table class="layui-hide" id="sysUser" lay-filter="sysUser"></table>
    </div>
</div>

<script type="text/html" id="headtoolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="updateXj">批量修改学籍</button>
        <button class="layui-btn layui-btn-sm" lay-event="delStus">批量修改删除</button>
    </div>
</script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="query">查看</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">删除</button>
    </div>
</script>

<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['element', 'layer', 'form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table;


        initTable()

        $('#addBtn').click(function () {
            var a = '<a target="ifm" href="/ssms/sysUser/info?action=add"></a>'
            $(a)[0].click()
        })

        // 搜索提交
        form.on('submit(searchBtn)', function (data) {
            search(data.field) // data.field是一个js对象
            return false;
        })


        //监听工具条
        table.on('tool(sysUser)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            console.log(data)
            console.log(layEvent)
            if (layEvent === 'remove') { //删除
                layer.confirm('真的删除？', function (index) {
                    remove(data);
                });
            }else if (layEvent === 'query') { //编辑
                var a = '<a target="ifm" href="/ssms/sysUser/info?action=update&stuId='+data.id+'"></a>'
                $(a)[0].click()
            }
        });

        //头工具栏事件
        table.on('toolbar(sysUser)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            console.log(data)

            if(data.length == 0){
                layer.msg('至少选中一个',{icon:7})
            }else{
                var stuIds = []
                data.map(function (item) {
                    stuIds.push(item.id)
                })

                switch(obj.event){
                    case 'updateXj':
                        $.post('/ssms/sysUser/updateXjs',{ids:stuIds},function (res) {
                            reloadTable()
                        })
                        break;
                    case 'delStus':
                        $.post('/ssms/sysUser/deleteStus',{ids:stuIds},function (res) {
                            reloadTable()
                        })
                        break;
                };
            }
        });

        // 删除
        function remove(data) {
            $.post('/ssms/sysUser/delete/stu',{id: data.id},function (res) {
                if (res.code == 200) {
                    reloadTable();
                    layer.msg('删除成功', {icon: 6, time: 1000})
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }


        // 初始化表格
        function initTable() {
            table.render({
                elem: '#sysUser'
                , url: '/ssms/sysUser/graduations'
                ,toolbar: '#headtoolbar'
                ,defaultToolbar: []
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'code',width: 120, title: '学号'}
                    , {field: 'username',width: 120, title: '姓名'}
                    , {field: 'stuDetail',width: 100, title: '年级',templet:'<div>{{d.stuDetail.grade}}</div>'}
                    , {field: 'subjectName', title: '专业'}
                    , {field: 'clazzName',width: 150, title: '班级'}
                    , {field: 'stuDetail',width: 100, title: '学籍',templet:'<div>{{d.stuDetail.xj}}</div>'}
                    , {title: '操作', toolbar: '#toolbar', width: 180}
                ]]
                , page: true
            });
        }

        // 表格搜索
        function search(fieldObj) {
            console.log(fieldObj)
            table.reload('sysUser', {
                url: '/ssms/sysUser/graduations'
                , where: fieldObj
                , page: {
                    curr: 1
                }
            });
        }
        // 重新加载
        function reloadTable() {
            table.reload('sysUser', {
                url: '/ssms/sysUser/graduations',
            });
        }
    });
</script>
</body>
</html>